import { connect } from 'dva';
import { Component } from 'react';
import { Form, Layout, Select, List, Button, Card } from 'antd';
import DatabaseInfo from './database-info';
import style from './style.less';
const { Header, Footer, Sider, Content } = Layout;


const entityNameSpace = 'database';
@connect(({ database, loading }) => ({
  database,
  loading: loading.models.database,
}))
class DatabaseManager extends Component {
  state = {
    selectedDbId: 0,
    dbId:'',
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: `${entityNameSpace}/queryAllDatabase` });
  }

  changeDatabase = dbId => {
    this.setState({dbId:dbId})
    const { dispatch } = this.props;
    dispatch({ type: `${entityNameSpace}/queryTableListByDbId`, payload: dbId });
  };

  dataDetail=()=>{
    const { dispatch } = this.props;
    const { dbId } =this.state;

    dispatch({ type: `${entityNameSpace}/queryDataDetail`, payload: { id : dbId }});
  };

  clearData = () =>{
    const { dispatch } =this.props;
    dispatch({
      type: `${entityNameSpace}/dataDetail`,
      payload: {},
    });
  }

  render() {
    const {
      [entityNameSpace]: { databaseList, tableList,databaseDetail },
    } = this.props;
    console.log(this.props)
    const { dbId } =this.state;
    return (
      <Layout>
        <Sider width={300} className={style.database}>
          <h2>数据库管理</h2>
          <Select style={{ width: '100%' }} placeholder="选择数据库" onChange={this.changeDatabase}>
            {databaseList.map(db => (
              <Select.Option key={'_db_' + db.id} value={db.id}>
                {db.dbName}
              </Select.Option>
            ))}
          </Select>
          <List
            size="small"
            bordered
            dataSource={tableList}
            renderItem={item => (
              <List.Item>
                {item.name + '-' + item.comment} <Button type="link">同步</Button>
              </List.Item>
            )}
          />
        </Sider>
        <Layout>
          <Header>
            <Button style={{ marginRight: 10 }} type="primary" onClick={()=> this.clearData()}>添加数据库</Button>
            {dbId ? <Button type="info" onClick={()=> this.dataDetail()}>数据库详情</Button>:''}
            <br />
          </Header>
          <Content>
            <Card>
            {/** 数据库详情内容 */}
            <DatabaseInfo databaseDetail={databaseDetail} />
            </Card>
          </Content>
        </Layout>


      </Layout>
    );
  }
}

export default DatabaseManager; // Form.create()(DatabaseManager);
